<script setup lang="ts">
import { LogoutOutlined } from '@ant-design/icons-vue'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import * as accountApi from '@/api/account'
import * as orderApi from '@/api/order'
import { toYuan, copyToCliboard, timeFormat } from '@/hooks/util'
import { useUserStore } from '@/store/modules/user'
import { message, Empty } from 'ant-design-vue'
import Tip from '../Tip/index.vue'
import ServiceModal from '../service-modal/index.vue'
import AddServiceModal from '../Modal/index.vue'
import Marquee from './AnnouncementSlider.vue'
import XiaTong from './common/index.vue'
import { timerFun, destroyTime } from '@/utils/timing'
import { timerFun1, destroyTime1 } from '@/utils/timing1'
import { timerFun2, destroyTime2 } from '@/utils/timing2'

import Tabs from '@/components/Tabs/index.vue'
import MessageList from './messageList.vue'
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

import { useBrandStore } from '@/store/modules/brand'

const brandStore = useBrandStore()

const count = ref(0) // 徽标数

const userStore = useUserStore()
const router = useRouter()
const activeKey1 = ref('1')
const XiaRef = ref()

const visible1 = ref(false)
const visible2 = ref(false)
const notifictaionVisible = ref(false)

const activeKey = ref(0) // 消息通知

const TipRef = ref()
const ServiceModalRef = ref()
const addMoneyModalRef = ref()
const orderNumber = ref('')
const Loading = ref(false)
const btnShow = ref(true)
// let khdLink =
//   'https://pdr-client-download-1323418546.cos.ap-shanghai.myqcloud.com/%E7%A5%A8%E8%BE%BE%E4%BA%BAcrm%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9Fv2.0%E5%AE%A2%E6%88%B7%E7%AB%AF.zip'
// let chupiaoya_khdLink =
//   'https://pdr-client-download-1323418546.cos.ap-shanghai.myqcloud.com/%E8%A7%A6%E7%A5%A8%E9%B8%ADcrm%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9Fv2.0%E5%AE%A2%E6%88%B7%E7%AB%AF.zip'

let ruleSign = ref<string>('USER')
const visible = ref(false)
const setSkmVisible = (value: any) => {
  visible.value = value
}
onMounted(async () => {
  await userStore.getUserInfo()
  ruleSign.value = userStore.userInfo.role

  shows(null)
  timerFun(shows, 2000)()

  getOrderNumber()
  timerFun1(getOrderNumber, 5000)()

  // timerFun2(getAllMessageTypeRefresh, 2000)()

  // await getAllMessageCount()
})
const FormatNumber = computed(() => {
  return userStore.userInfo.userName.slice(0, 3) + '****' + userStore.userInfo.userName.substring(7)
})
const props = withDefaults(defineProps<{ userName: string }>(), {
  userName: () => '...',
})

watch(
  () => ({ ...props }),
  (newVal, oldVal) => {
    // console.log('newVal=', newVal)
  },
)
watch([visible1, visible2], ([newVisible1, newVisible2], [oldVisible1, oldVisible2]) => {
  if (newVisible1 === false && newVisible2 === false) {
    // Execute your function here when both are false
    destroyTime2()
  }
})
const handleClickPopover = (item, index) => {
  visible2.value = false
  // getAllMessageTypeRefresh()

  // timerFun2(getAllMessageTypeRefresh, 2000)()

  getChant(index)
  visible1.value = true
}

/** 消息--标签页监听 */
const getChant = (val: any) => {
  activeKey.value = val
  MessageParams.msgTypes = allMessageTypeList.value[val]?.msgTypes
  currentPage.value = 1
  MessageParams.currentPage = 1
  getList()
}
const orderNumberCount = ref(0)
//获取订单数量
const getOrderNumber = async () => {
  try {
    const res = await orderApi.filmOrderOwnOutTicketCount()
    if (res.state == 200) {
      orderNumberCount.value = res.data
    } else {
      message.error(res.message)
    }
  } catch (error) {
    // message.error('网络请求连接失败~')
  }
  // console.log('error=', error)
}
// const params=ref({

// })

// const getOrderNumberList = async () => {
//   try {
//     const res = await orderApi.getOwnOutTicketList()
//     if (res.state == 200) {
//       orderNumberCount.value = res.data
//     } else {
//       message.error(res.message)
//     }
//   } catch (error) {
//     message.error('网络请求连接失败~')
//   }
// }

/** 获取消息未读总数 */
const shows = async (val: any) => {
  const res = await accountApi.getInfoWeiZon()
  if (res.state == 200) {
    if (
      visible1.value &&
      count.value != res.data &&
      val != '单独已读' &&
      val != '全部已读' &&
      activeKey.value === 1
    ) {
      XiaRef.value.childMethod(activeKey.value)
    }

    count.value = res.data
  }
}

const handleClickChange = (visible1: boolean) => {
  getAllMessageTypeRefresh()

  timerFun2(getAllMessageTypeRefresh, 2000)()

  // if (!visible1) {
  //   XiaRef.value.getChild()
  // } else {
  //   setTimeout(() => {
  //     XiaRef.value.childMethod(activeKey.value)
  //   }, 100)
  // }
}
const logout = () => {
  userStore.logout()

  destroyTime()
  router.push('/login')
}

const systemSet = () => {
  router.push('/account-system')
}

const fundDetail = () => {
  router.push('/fund-detail')
}
const addMoney = () => { }

let allMessageTypeList = ref([])

let items = ref({})
let dataSource = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10) // 每页显示条数

let MessageParams = reactive({
  currentPage: 1,
  msgTypes: [],
  pageSize: 10,
})
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '30', '50'],
  showTotal: total => `共 ${total} 条`,
  onChange: (page, pageSize) => {
    pagination.current = page
    pagination.pageSize = pageSize
    getList()
  },
})
const getList = async () => {
  if (!MessageParams.msgTypes.length) {
    return
  }
  try {
    const result = await accountApi.newPageListMsgNotify(MessageParams)
    console.log(result)
    if (result.state == 200) {
      console.log(result.message)
      dataSource.value = result.data.list
      total.value = Number(result.data.totalCount)
    } else {
      message.error(result.message)
    }
  } catch (error) { }
}

const handlePageChange = (page: any) => {
  console.log(page)

  currentPage.value = page
  MessageParams.currentPage = page
  getList()
}
let messageCountList = ref([])
const getAllMessageCount = async () => {
  try {
    const res = await accountApi.getMsgAllTypeCount()
    if (res.state == 200) {
      console.log(res, 'res')

      messageCountList.value = res.data
    } else {
      message.error(res.message)
    }
  } catch (e) { }
}

//获取所有消息类型数组 首次
const getAllMessageType = async () => {
  try {
    const res = await accountApi.getMsgAllTypeList()
    if (res.state == 200) {
      allMessageTypeList.value = res.data
      items.value = res.data[0]
      MessageParams.msgTypes = res.data[0].msgTypes
      console.log(items.value, 'items.value ')
      getList()
    } else {
      message.error(res.message)
    }
  } catch (e) { }
}
//获取所有消息类型数组 后面刷新 写两遍为了区分好 因为这里需要判断 感觉还不如这样好看 虽然代码重复了 后来者可以改 因为还需要调用这个 刷新 count
const getAllMessageTypeRefresh = async () => {
  try {
    const res = await accountApi.getMsgAllTypeList()
    if (res.state == 200) {
      allMessageTypeList.value = res.data
    } else {
      message.error(res.message)
    }
  } catch (e) { }
}
let spinning = ref(false)

const readFun = async (item: any) => {
  spinning.value = true
  try {
    const res = await accountApi.getInfoYiDu(item.id)
    if (res.state == 200) {
      message.success('消息已读成功~')
      getAllMessageTypeRefresh()
      getList()
      spinning.value = false
    } else {
      message.error(res.message)
      spinning.value = false
    }
  } catch (err) {
    message.error('操作失败~')
    spinning.value = false
  }
}

/** 点击全部已读 */
const readFunAll = async () => {
  spinning.value = true

  try {
    const res = await accountApi.getInfoAllDu()
    if (res.state == 200) {
      getAllMessageTypeRefresh()
      getList()

      message.success('全部消息已读成功~')
      spinning.value = false
    } else {
      message.error(res.message)
      spinning.value = false
    }
  } catch (err) {
    message.error('操作失败~')
    spinning.value = false
  }
}

/** 点击类型已读 */
const readFunAllType = async () => {
  spinning.value = true

  try {
    const res = await accountApi.updateTypeStatusMsgNotify({ msgTypes: MessageParams.msgTypes })
    if (res.state == 200) {
      getAllMessageTypeRefresh()
      getList()

      message.success('当前类型中的消息已读成功~')
      spinning.value = false
    } else {
      message.error(res.message)
      spinning.value = false
    }
  } catch (err) {
    message.error('操作失败~')
    spinning.value = false
  }
}

// 获取账户余额
let balance = ref<string | number>('')
const getBalance = async () => {
  try {
    let { state, data, message: msg } = await accountApi.getUserBalance()
    if (state === 200) {
      balance.value = data.balance
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const change = (e: any) => {
  if (e) {
    getBalance()
  }
}

const goUser = () => {
  router.push('/user-list')
}

const goOrder = () => {
  router.push('/order-manage-list')
}
const goSelfOrder = () => {
  if (orderNumberCount.value > 0) {
    router.push('/self-ordering')
  } else {
    message.warning('暂无待出票订单~')
  }
}

const goBalance = () => {
  router.push('/assets-manage')
}

const goFinancial = () => {
  router.push('/admin-financial-detail')
}

const goPedigree = () => {
  router.push('/user-pedigree')
}

// 黑名单审核列表
const goBlackList = () => {
  router.push('/user-black')
}

const goUserAccount = () => {
  router.push('/admin-account')
}

const goUserTgZX = () => {
  router.push('/promotion-center')
}

const tgCenter = () => {
  router.push('/promotion-center')
}

const goJfProduct = () => {
  router.push('/integral-product')
}

const ConfirmAddMoney = async () => {
  if (activeKey1.value == '2') {
    activeKey1.value = '1'
    return
  }
  Loading.value = true
  console.log(`AddMoney`)
  if (!orderNumber.value) {
    message.error('支付宝订单号不能为空~')
    Loading.value = false

    return
  }
  try {
    let { state, data, message: msg } = await accountApi.AddMoney({ tradeNo: orderNumber.value })
    if (state === 200) {
      message.success('充值成功~')

      Loading.value = false
      addMoneyModalRef.value.setVisible(false)
    } else {
      message.error(msg)
      Loading.value = false
    }
  } catch (error) {
    console.log(error, 'errorerrorerror')

    message.error('系统错误~')
    Loading.value = false
  }
}

const handleChange = e => {
  console.log(e)
  // if (e == 2) {
  //   btnShow.value = false
  // } else {
  //   btnShow.value = true
  // }
}
const announcements = ref([
  {
    id: 5,
    title: "平台 重磅升级！新增「实物尾货分销」业务，0成本开启闲鱼新副业！",
    time: "2025年6月26日",
    content: `
    
      <div>
      <p>尊敬的票达人用户：</p>
  <p> 感谢您一直以来对票达人CRM的信任与支持！为帮助您拓展闲鱼店铺收益渠道，我们正式推出<strong>「实物尾货分销」</strong> 全新业务模块！现诚邀您抢先体验，一键上架正品货源，轻松开启“影票+实物”双轨增收模式！</p>

  <h3>🔥 新业务亮点速览 </h3>
  <ol>
  <li>
  <strong>正品保障·品牌授权 </strong><br>
              所有商品均来自品牌方 / 渠道商正品尾货，授权资质齐全，支持验货。<br>
  覆盖品类：3C数码、家居日用、美妆个护、潮玩服饰等（持续更新中）。
  </li>
  <li>
  <strong>0库存·0垫资·一键上架 </strong><br>
              自建选品中心：系统内实时更新高性价比货源，支持售价 / 类目等数据筛选。<br>
  一键铺货：选中商品→自动同步图文详情（可自定义优化编辑）→直达您的闲鱼店铺，上架仅需3秒！
  </li>
  <li>
  <strong>全流程代发，售后无忧 </strong><br>
              订单自动同步：用户下单后，货源方24 / 48小时内极速发货（物流信息自动同步至闲鱼）。<br>
  专业售后支持：专属支持群，实时协助处理订单问题，退换货由供应方兜底，您无需处理库存与物流。
  </li>
  </ol>

  <h3>🚀 如何快速开通？</h3>
  <p> 进入票达人CRM系统 → 点击<strong>「实物尾货分销 -」</strong> 新入口。<br>
          浏览热销尾货：根据“售价”“佣金率”筛选商品，一键上架闲鱼店铺。<br>
  素材自主灵活：可自定义修改文案素材，提高动销转化率 </p>

  <h3>💡 为什么值得尝试？</h3>
  <ul>
  <li>盘活闲鱼流量：实物商品吸引新客，带动影票业务曝光，店铺流量倍增！</li>
  <li> 躺赚增量收益：无需资金囤货、不占时间发货，副业月入再 + 2000元！</li>
  <li> 系统无缝衔接：订单自动同步至CRM，统一管理影票 + 实物业务，效率翻倍。</li>
  </ul>

  <p>🌟 立即行动，抢占蓝海市场！<br>
  登录票达人CRM系统 → 进入<strong>「选品中心」</strong>→ 开启您的尾货分销首单！</p >

  <p>遇到问题？点击后台上方<strong>「在线客服」</strong> 或联系您的专属顾问，获取选品/运营指导！</p>
  <p> 票达人CRM，助您从“票务专家”升级为“全能店主”！<br>
  新业务，新机会，期待与您共同成长！</p>
  </div>
      
    
    `
  },

  {
    id: 1,
    title: "“订单提交率”指标控制的调整公告",
    time: "2025年6月24日",
    content: `根据用户反馈及平台数据，为了减少因隔日数据在运营上不容易调整的问题，我们将控制逻辑由原来的：“昨日提交率”需满足系统阈值，调整为：“今日实时提交率”需满足系统阈值，便于您灵活调整运营方案`
  },
  {
    id: 2,
    title: "票达人CRM”关于影票代订业务中增加“订单提交率”指标控制的公告",
    time: "2025年6月18日",
    content: `<div>
        <p>基于用户反馈、意见收集，原，本次更新如下：</p>
        
        <h4>【指标说明】</h4>
        <ul>
          <li><strong>闲鱼付款订单数：</strong>您在闲鱼平台账号中发布的，满足系统行业控制关键字，被认定为影票代订业务的商品，系统识别顾客选座截图报价后，顾客闲鱼付款的累计单数</li>
          <li><strong>提交票达人平台订单数：</strong>您通过自动模式、手动模式、初语客服系统等，向票达人提交的影票代订的累计订单数</li>
          <li><strong>昨日订单提交率：</strong>昨日提交票达人平台订单数÷昨日闲鱼付款订单数</li>
        </ul>
 
        <h4>【控制方式】</h4>
        <p>如您票达人账号，昨日订单提交率低于平台设置的阈值，则今日票达人账号的识别功能将被禁用，次日自动恢复</p>
 
        <h4>【举例说明】</h4>
        <ul>
          <li><strong>时间：</strong>2025年6月11日</li>
          <li><strong>闲鱼付款订单数：</strong>100单</li>
          <li><strong>提交票达人平台订单数：</strong>50单</li>
          <li><strong>订单提交率：</strong>50%</li>
          <li><strong>平台设置阈值：</strong>65%</li>
          <li><strong>结果：</strong>则2025年6月12日，您票达人账号的识别功能将被禁用，2025年6月13日自动恢复！</li>
        </ul>
 
        <h4>【数据及可用性状态查看位置】</h4>
        <ul>
          <li><strong>生效时间：</strong>2025年6月20日起，2025年6月19日数据将被用于首次验证</li>
          <li><strong>查看位置：</strong>良票开放平台 - 运营团队</li>
        </ul>
      </div>`
  },
  {
    id: 3,
    title: "票达人平台关于增加“订单提交率”的公示说明",
    time: "2025年6月16日",
    content: ` <div>
    <h4>【名词说明】</h4>
    <ul>
      <li><strong>上游出票平台：</strong>是指“麻花”“芒果”“守兔”“影划算”等为影票代订业务提供票务供应的平台。</li>
      <li><strong>api限流：</strong>是指固定时间单位内，某api的可使用次数，例如“获取座位详情api”限流为“20/分”，那么一分钟内第21次会获取失败，不同的上游出票平台会根据接入方的订单量做调整。</li>
      <li><strong>订单成功率：</strong>是指提交到上游出票平台订单后，成功订单数占总订单数的比例，例如提交100单，出票成功90单，则成功率为90%。</li>
      <li><strong>订单折扣率：</strong>是指提交到上游出票平台订单后，出票成功订单出票价格与猫淘原价的比例，例如出票价40元；原价60元，则折扣率为：66.6%。</li>
      <li><strong>兜底出票：</strong>是指在节假日等订单高峰期，供需关系变化较大，订单多，票商少，上游出票平台为保障订单成功率，将部分无人接单的订单流转给淘票猫眼等渠道亏损出票。</li>
      <li><strong>订单提交率：</strong>例如你店铺成交了100单，自己出了50单，提交票达人50单，提交率为50%。</li>
    </ul>
 
    <h4>【情况说明】</h4>
    <p>在订单低峰期，部分用户为了店铺利润，仅使用票达人系统的报价功能，订单成交后自行完成出票或通过自己的放单账号提交给上游出票平台，这种操作是可以理解的，没有问题的；</p>
    <p>但在订单高峰期，上游出票平台会根据接入方（票达人）提交的订单数来调整api限流，如果订单量较少，则会影响整体业务的可用性，导致无法识别选座截图，无法进行报价等问题；</p>
    <p>同时订单量也是票达人平台与上游出票平台沟通订单成功率、订单折扣率、以及订单高峰期兜底出票政策的必要条件；</p>
 
    <h4>【计划内容】</h4>
    <p>为保障节假日高峰期平台系统的稳定运行，我们计划增加“订单提交率”指标，并以此指标进行部分功能的限制，具体方案还未商定，在此我们希望倾听广大用户的意见、方案、支招，为即将到来的暑期档做准备！</p>
 
    <h4>【一些解答】</h4>
    <ol>
      <li><strong>订单手续费：</strong>目前预估限价模式的出票平台，订单手续费为成交价的3%，一口价无订单手续费。</li>
      <li><strong>激励金费用：</strong>为了平台能动态调整出票成功率和折扣率，避免受供需变化影响太大，我们在预估限价模式中设计了激励金机制（通过在报价人数较多的订单上压低价格，补偿给无人报价的订单），这一方案较明显的提高了限价场景的订单成功率。</li>
      <li><strong>关于软件退费：</strong>在软件服务行业中，因预设的云服务冗余成本，开发成本等，通常是不进行退费操作的，但考虑到实际情况我们设定了退费标准，任一条件即可（OEM定制版以定制合同约定为准）
        <ul>
          <li>基于票达人平台系统功能的自动化业务长时间故障未恢复，导致业务无法进行</li>
          <li>票达人平台停止运营</li>
        </ul>
      </li>
      <li><strong>报价规则接管：</strong>为提高整体的订单转化率，优化报价模型，以及联动官方政策，平台会根据实际情况，动态进行报价接管并包赔亏损订单。</li>
    </ol>
  </div>`
  },
  {
    id: 4,
    title: " 关于“良票开放平台”影票代订业务中“动态接单激励金”运行机制的公告",
    time: "2025年2月18日",
    content: `<p>尊敬的用户：</p>
    <p>为了平台能动态调整出票成功率和折扣率，避免订单成功率和折扣率受市场供需变化影响太大，我们在预估限价模式中设计了激励金机制(通过在报价人数较多的订单上压低价格，补偿给无人报价的订单)，这一方案较显著的提高了预估限价模式的订单成功率，此机制暂不支持针对某账号单独关闭，请您知悉!</p>
    <p>此机制运行开始时间：2025年2月18日 - 结束时间：暂无</p>`
  },


])
const notifiContentVisible = ref(false) // 相关的弹框内容 
const notifiInfo = ref({})
const handleItemClick = (item: any) => {
  notifiInfo.value = item
  content.value = item.content
  notifiContentVisible.value = true
}
const handleClickNotifictaion = () => {
  notifictaionVisible.value = true
}

const content = ref();
</script>

<template>
  <!-- <Tip ref="TipRef"></Tip> -->
  <div class="notifictaion-box" @click="handleClickNotifictaion">
    <SoundOutlined style="color: red;" />
    <div>
      <a-carousel autoplay :dots="false" effect="fade">
        <div class="announcement-item" v-for="item in announcements" :key="item.title">
          {{ item.title }}
        </div>
      </a-carousel>
    </div>


  </div>
  <a-modal :title="notifiInfo.title" v-model:open="notifiContentVisible" :height="600" :width="800" :footer="null">
    <div class="notifi-content" v-html="content" v-if="notifiContentVisible">


    </div>
    <div style="margin-top: 15px; display: flex; align-items: center" v-if="notifiInfo.id == 3">
      <a-image :width="200" src="https://pdr-web-v2-1323418546.cos.ap-shanghai.myqcloud.com/Images/1.png" />
      <div style="width: 50px"></div>

      <a-image :width="200" src="https://pdr-web-v2-1323418546.cos.ap-shanghai.myqcloud.com/Images/2.png" />

    </div>
    <div v-if="notifiInfo.id == 1" style="text-align: center;">

      <a-image :width="500" src="https://pdr-web-v2-1323418546.cos.ap-shanghai.myqcloud.com/Images/3.png" />

    </div>


  </a-modal>
  <a-modal title="公告" v-model:open="notifictaionVisible" :height="600" :width="800" :footer="null">
    <div class="announcement-content">
      <div class="announcement-list-items" v-for="item in announcements" @click="handleItemClick(item)"
        :key="item.title">
        <div class="left">{{ item.title }}</div>
        <div class="right">{{ item.time }}</div>
      </div>

    </div>

  </a-modal>
  <ServiceModal ref="ServiceModalRef"></ServiceModal>
  <AddServiceModal ref="addMoneyModalRef" :width="800" title="余额充值" okText="确认充值" @onConfirmAdd="ConfirmAddMoney"
    :Loading="Loading" :height="600" :btnShow="btnShow">
    <template #contentValue>
      <a-tabs v-model:activeKey="activeKey1" @change="handleChange">
        <a-tab-pane key="1" tab="账户充值">
          <div class="add-money-box">
            <div style="height: 15px"></div>
            <div class="title">
              <a-divider type="vertical" style="height: 16px; background-color: #5199ff; width: 3px" />
              <span style="font-size: 15px">充值说明</span>
            </div>
            <div class="txt-box">
              <div class="txt-item">1. 请使用支付宝app，通过下方收款账号进行转账支付。</div>

              <div class="txt-item">
                2. 转帐后<span style="color: #1890ff;">请在20分钟内</span>填入订单号，确认充值，系统查询到您的转帐记录后会自动加款到您的帐户中。
              </div>
            </div>
            <div style="height: 15px"></div>

            <div class="title">
              <a-divider type="vertical" style="height: 16px; background-color: #5199ff; width: 3px"></a-divider>

              <span style="font-size: 15px">账号信息</span>
            </div>
            <div class="txt-box">
              <div class="txt-item">
                支付宝名称:
                <span style="font-weight: 700; margin-left: 10px; cursor: pointer"
                  @click="copyToCliboard('河北良票网络科技有限公司')">
                  河北良票网络科技有限公司
                </span>
                <a-button type="link" @click="copyToCliboard('河北良票网络科技有限公司')">
                  复制
                </a-button>
              </div>
              <div class="txt-item">
                支付宝账号:
                <span style="font-weight: 700; margin-left: 10px; cursor: pointer"
                  @click="copyToCliboard('liangpiaogzh@nianchu.net')">
                  liangpiaogzh@nianchu.net
                </span>
                <a-button type="link" @click="copyToCliboard('liangpiaogzh@nianchu.net')">
                  复制
                </a-button>
              </div>

            </div>
            <div style="height: 15px"></div>
            <div class="title">
              <a-divider type="vertical" style="height: 16px; background-color: #5199ff; width: 3px" />
              <span style="font-size: 15px">充值信息</span>
            </div>
            <div class="add-box">
              <div class="add-item">
                <div class="item-title">票达人账号:</div>
                <div class="value">{{ FormatNumber }}</div>
              </div>
              <div class="add-item">
                <div class="item-title">支付宝订单编号:</div>
                <div class="value">
                  <a-input v-model:value="orderNumber" placeholder="支付宝订单编号" />
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </template>
  </AddServiceModal>


  <div class="main-box">
    <div style="display: flex; align-items: center; margin-right: 5px">
      <a-popover placement="bottom" trigger="click" v-model:open="visible2" @openChange="handleClickChange">
        <template #content>
          <a-spin tip="加载中..." :spinning="spinning">
            <div style="display: flex; align-items: center; justify-content: space-between">
              <div></div>
              <a-button type="link" @click="readFunAll">全部类型已读</a-button>
            </div>
            <div class="popover-container123" v-if="allMessageTypeList.length != 0">
              <div class="popover-item-1" v-for="(item, index) in allMessageTypeList"
                @click="handleClickPopover(item, index)" :key="index">
                <div class="popover-item-title">
                  <a-badge :count="item.count" :offset="[12, -5]">
                    {{ item.type }}
                  </a-badge>
                </div>
              </div>
            </div>
            <!-- <a-card  >
            <a-card-grid style="width: 33.33%; text-align: center"  v-for="(item, index) in allMessageTypeList" >{{ item?.type}}</a-card-grid>
           
          </a-card> -->
          </a-spin>
        </template>

        <a-badge :count="count" :offset="[-5, 4]">
          <a-button type="link">
            <template #icon>
              <BellOutlined />
            </template>
          </a-button>
        </a-badge>
      </a-popover>
    </div>
    <a-modal title="通知" v-model:open="visible1" :footer="null">
      <a-spin tip="加载中..." :spinning="spinning">
        <Tabs v-model="activeKey" @update:modelValue="getChant" :tabs="allMessageTypeList"></Tabs>
        <div class="messageList-read">
          <div></div>
          <a-button type="link" @click="readFunAllType">当前类型已读</a-button>
        </div>
        <div class="messageList-container" v-if="dataSource.length">
          <div class="message-item" v-for="(item, index) in dataSource" :key="item.id">
            <div class="message-item-header">
              <div class="message-item-header-left">
                <div class="badge" v-if="item.status == 1"></div>
                <div class="name">{{ item?.title }}</div>
              </div>
              <div class="message-item-header-rigth">
                <div class="is-noread" v-if="item.status == 1">
                  <div class="time">{{ timeFormat(item?.createTime) }}</div>
                  <div class="btn">
                    <a-button type="link" size="small" @click="readFun(item)">设为已读</a-button>
                  </div>
                </div>
                <div v-else>{{ timeFormat(item?.createTime) }}</div>
              </div>
            </div>
            <div class="message-item-content">{{ item?.notifyMsg }}</div>
          </div>
        </div>
        <div v-else>
          <a-empty :image="simpleImage" />
        </div>
        <div class="pagination-wrapper">
          <a-pagination v-model:current="currentPage" :total="total" :pageSize="pageSize" show-less-items
            @change="handlePageChange" />
        </div>
      </a-spin>
    </a-modal>
    <a @click="goSelfOrder" class="self-order-a">
      待出票订单
      <span class="number" v-if="orderNumberCount > 0">
        {{ orderNumberCount < 99 ? orderNumberCount : '99+' }} </span>
          <a-tooltip>
            <template #title>报价规则，专业规则支持设置特定条件的订单自行出票</template>
            <QuestionCircleOutlined />
          </a-tooltip>
    </a>
    <a v-if="brandStore.rightTopKfFlag" @click="ServiceModalRef.setVisible(true)">
      {{ brandStore.kefuText }}
    </a>

    <!-- <a v-if="brandStore.xinRenShiPinFlag" @click="TipRef.showModal(true)">新人视频</a> -->

    <!-- <span v-if="brandStore.promotionCenter" @click="goUserTgZX" :class="{ active: userStore.nowRouter == '/promotion-center' }">
      推广中心
    </span> -->

    <!-- <div v-if="ruleSign === 'ADMIN'">
      <span @click="goPedigree" :class="{ active: userStore.nowRouter == '/user-pedigree' }">
        用户族谱
      </span>

      <span @click="goBlackList" :class="{ active: userStore.nowRouter == '/user-black' }">
        黑名单审核
      </span>

      <span
        @click="goFinancial"
        :class="{ active: userStore.nowRouter == '/admin-financial-detail' }"
      >
        用户资金明细
      </span>

      <span @click="goUserAccount" :class="{ active: userStore.nowRouter == '/admin-account' }">
        用户平台账号
      </span>

      <span @click="goOrder" :class="{ active: userStore.nowRouter == '/order-manage-list' }">
        用户订单
      </span>

      <span @click="goUser" :class="{ active: userStore.nowRouter == '/user-list' }">用户列表</span>

      <span @click="goBalance" :class="{ active: userStore.nowRouter == '/assets-manage' }">
        资产管理
      </span>

      <span @click="goJfProduct" :class="{ active: userStore.nowRouter == '/integral-product' }">
        积分商品
      </span>
    </div> -->

    <a :href="brandStore.download_client">下载客户端</a>

    <span @click="goBalance" v-if="brandStore.assetsManageFlag"
      :class="{ active: userStore.nowRouter == '/assets-manage' }">
      资产管理
    </span>

    <a-dropdown @visibleChange="change">
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <div style="color: #40a9ff">
              <b style="margin-left: 5px">账户余额：</b>
              <span>{{ toYuan(Number(balance)) }}</span>
            </div>
          </a-menu-item>
          <a-menu-item @click="; (orderNumber = ''), addMoneyModalRef.setVisible(true)">
            <template #icon>
              <DollarOutlined />
            </template>
            <span>余额充值</span>
          </a-menu-item>
          <a-menu-item @click="fundDetail">
            <template #icon>
              <TransactionOutlined />
            </template>
            <span>资金明细</span>
          </a-menu-item>

          <a-menu-item @click="systemSet">
            <template #icon>
              <SettingOutlined />
            </template>
            <span>通知设置</span>
          </a-menu-item>

          <a-menu-item @click="tgCenter">
            <template #icon>
              <SlackOutlined />
            </template>
            <span>推广中心</span>
          </a-menu-item>

          <a-menu-item @click="logout">
            <template #icon>
              <LogoutOutlined />
            </template>
            <span>退出登录</span>
          </a-menu-item>
        </a-menu>
      </template>
      <span>
        <UserSwitchOutlined />
        {{ userName }}
      </span>
    </a-dropdown>
  </div>
</template>

<style lang="less" scoped>
:deep(.slick-slide) {
  text-align: left;
  height: 48px;
  line-height: 48px;
  // background: #364d79;
  // overflow: hidden;
  width: 800px !important;
  // background-color: pink;
}

:deep(.ant-carousel) {
  height: 48px;
  line-height: 48px;
  width: 800px !important;
  // background-color: pink;
}



a,
span {
  margin-right: 8px;
}

.pagination-wrapper {
  margin-top: 20px;
  text-align: center;
  padding: 10px 0;

  .ant-pagination {
    display: inline-block;
  }
}

.popover-container123 {
  width: 440px;
  display: flex;
  flex-wrap: wrap;

  .popover-item-1 {
    width: 33.33%;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    // border-radius: 6px;
    box-shadow: 0.4px 0.4px 0.4px rgba(24, 144, 255, 0.2);
    // height: 33.33%;
    // width: 100px;
    // height: 100px;
    // background-color: pink;
  }

  .popover-item-1:hover {
    cursor: pointer;
    background-color: #f3f3f3;
    // border-radius: 6px;
  }
}

.messageList-read {
  margin: 10px;
  display: flex;
  justify-content: space-between;
}

.messageList-container {
  height: 300px;
  overflow-y: auto;
  max-height: 360px;
  width: 100%;

  .message-item {
    padding: 25px 16px;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
    border-bottom: 1px solid #f7f8f9;

    .message-item-content {
      color: #999;
    }

    .message-item-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;

      .message-item-header-left {
        font-weight: 700;
        display: flex;
        align-items: center;

        .badge {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background-color: #ff4d4f;
        }

        .name {
          margin-left: 10px;
        }
      }

      .message-item-header-rigth {
        .is-noread {
          // position: relative;

          .time {
            display: block;
          }

          .btn {
            display: none;
          }
        }
      }
    }
  }

  .message-item:hover {
    background-color: #f3f3f3;
    border-radius: 6px;

    .message-item-header-left {
      color: #1890ff;
      transition: all 0.2s ease-in;
    }

    .message-item-content {
      color: #000;
      transition: all 0.2s ease-in;
    }

    .message-item-header-rigth {
      .is-noread {
        .time {
          display: none;
          transition: all 0.3s ease-in;
        }

        .btn {
          display: block;
          transition: all 0.3s ease-in;
        }
      }
    }
  }
}

.main-box {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  cursor: pointer;
  width: 1080px;
  min-width: 1080px;
  display: flex;
  justify-content: end;
  position: relative;
  // border: 1px solid red;
  // background: pink;
}

.notifictaion-box {
  position: absolute;
  left: 20px;
  top: 0;
  display: flex;
  align-items: center;

  .announcement-item {
    cursor: pointer;
    color: #1890ff;
  }

  .announcement-item:hover {
    color: #1890ff;


  }

}

.announcement-content {
  .announcement-list-items {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    cursor: pointer;

    .left {}

    .right {}

  }

  .announcement-list-items:hover {
    color: #1890ff;
  }

  .announcement-list-items:last-child {
    margin-bottom: 100px;
  }
}

.self-order-a {
  position: relative;
  padding: 0 5px;
}

.number {
  position: absolute;
  right: -12px;
  top: 2px;
  background-color: #ff4d4f;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 10px;
  color: #fff;
  font-size: 10px;
  text-align: center;
  box-shadow: 0 0 0 1px #ffffff;
  transition: background 0.2s;
  white-space: nowrap;
  min-width: 20px;
}

.add-money-box {
  .title {
    display: flex;
    align-items: center;
  }

  .txt-box {
    padding: 10px;

    .txt-item {
      font-size: 14px;
      margin-top: 5px;
      margin: 20px 0;
    }
  }

  .add-box {
    padding: 10px;
    display: flex;
    align-items: center;

    // justify-content: space-between;
    .add-item {
      font-size: 14px;
      margin-top: 5px;
      display: flex;
      align-items: center;

      .item-title {}

      .value {
        flex: 1;
        margin-left: 15px;
      }
    }

    .add-item:nth-child(n + 2) {
      margin-left: 100px;
    }
  }
}

.active {
  color: #40a9ff;
}
</style>
